<template>
  <div class="full-screen">
    <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">
      <div class="grid-container">
        <div class="item1">
          <div>
            <img src="../assets/logo/logo.png" style="width:10rem;position: relative;bottom:0.8rem;left:-2rem;">
          </div>
          <div style="font-size: 1.7rem;">
            和其光电模拟量监控分析系统
          </div>
          <div>
            <a href="/index"><img src="../assets/images/return-login.png" style="position:relative;left:-4rem;"></a>
          </div>
        </div>
        <dv-border-box-6>
          <div class="item2" style="white-space: pre-wrap;">
           <h3 class="custom-title">RS485命令发送状态</h3>
            <div ref="rs485ScrollContainer" style="font-size:1rem;color:yellow;height: 21rem; overflow-y: hidden;">{{ rs485TaskMessage }}</div>
           </div>
        </dv-border-box-6>
        <div class="item3">

        </div>
        <dv-border-box-6>
          <div class="item4" style="white-space: pre-wrap;">
            <h3 class="custom-title">420命令发送状态</h3>
            <div ref="fz420ScrollContainer" style="font-size:1rem;color:yellow;height: 21rem; overflow-y: hidden;">{{ fz420TaskMessage }}</div>
          </div>
        </dv-border-box-6>
        <dv-border-box-6>
          <div class="item5" style="white-space: pre-wrap;">
            <h3 class="custom-title">RS485命令接收状态</h3>
            <div ref="rs485ReciveScrollContainer" style="font-size:1rem;color:#32d032;height: 21rem; overflow-y: hidden;">{{ rs485ReceiveMessage }}</div>
          </div>
        </dv-border-box-6>
        <dv-border-box-11 title="异常数据">
          <div class="item6">
            <dv-scroll-board :config="config" style="width:100%;height:19rem;position:relative;top:3rem;" />
          </div>
        </dv-border-box-11>
        <dv-border-box-6>
          <div class="item7" style="white-space: pre-wrap;">
           <h3 class="custom-title">FZ420命令接收状态</h3>
            <div ref="fz420ReciveScrollContainer" style="font-size:1rem;color:#32d032;height: 21rem; overflow-y: hidden;">{{ fz420ReceiveMessage }}</div>
         </div>
        </dv-border-box-6>
        <div class="item8">西安和其光电科技股份有限公司【在线监测事业部】</div>
      </div>
    </ScaleBox>
  </div>
</template>

<script>
import ScaleBox from 'vue2-scale-box';
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
export default {
  name: "FullScreen",
  components:{ScaleBox},
  data() {
    return {
      rs485TaskMessage: "",
      fz420TaskMessage:"",
      rs485ReceiveMessage:"",
      fz420ReceiveMessage:"",
      stompClient: null,
      connected: false,
      config:{
        header: ['设备名称', '设备地址', '通道号','通道温度','异常状态','采集时间'],
        data:[],
        index: false,
        rowNum:10,
        columnWidth: [100,100,100,100,100,180],
        align: ['center']
      }
    };
  },
  mounted() {
    this.requestFullScreen();
    this.initWebSocketConnection();
  },
  created(){
  },
  methods: {
    requestFullScreen(){
      const elem = document.documentElement;
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      }
    },
    initWebSocketConnection() {
      const socket = new SockJS('http://localhost:8085/webSocket'); // 替换为你的后端WebSocket地址
      this.stompClient = Stomp.over(socket);
      this.stompClient.connect({}, (frame) => {
        this.connected = true;
        // 订阅主题
        this.stompClient.subscribe('/data/task', (message) => {
          let result = JSON.parse(message.body);
          if(result.rsFrameStru !==null && result.rsFrameStru !=="" && result.rsFrameStru !==undefined){
            if(this.rs485TaskMessage>1500){
              this.rs485TaskMessage = "";
            }else{
              this.rs485TaskMessage += `${result.rsFrameStru}\n`;
            }
          }
          if(result.fzFrameStru !==null && result.fzFrameStru !=="" && result.fzFrameStru !==undefined){
            if(this.fz420TaskMessage>1500){
              this.fz420TaskMessage = "";
            }else{
              this.fz420TaskMessage += `${result.fzFrameStru}\n`;
            }
          }
          if(result.rs485ReceiveData !==null && result.rs485ReceiveData !=="" && result.rs485ReceiveData !==undefined){
            if(this.rs485ReceiveMessage>1500){
              this.rs485ReceiveMessage = "";
            }else{
              this.rs485ReceiveMessage += `${result.rs485ReceiveData}\n`;
            }
          }
          if(result.fz420ReceiveData !==null && result.fz420ReceiveData !=="" && result.fz420ReceiveData !==undefined){
            if(this.fz420ReceiveMessage>1500){
              this.fz420ReceiveMessage = "";
            }else{
              this.fz420ReceiveMessage += `${result.fz420ReceiveData}\n`;
            }
          }
          // 滚动到最底部
          this.$nextTick(() => {
            const rs485container = this.$refs.rs485ScrollContainer;
            rs485container.scrollTop = rs485container.scrollHeight;
            const fz420container = this.$refs.fz420ScrollContainer;
            fz420container.scrollTop = fz420container.scrollHeight;
            const rs485ReciveContainer = this.$refs.rs485ReciveScrollContainer;
            rs485ReciveContainer.scrollTop = rs485ReciveContainer.scrollHeight;
            const fz420ReciveContainer = this.$refs.fz420ReciveScrollContainer;
            fz420ReciveContainer.scrollTop = fz420ReciveContainer.scrollHeight;
          });
        });
        this.stompClient.subscribe('/data/error', (message) => {
          // console.log("/data/error----->"+message.body);
          // this.config.data.unshift(message.body);
          // console.log("this.config.data----->"+this.config.data);
        })
      }, (error) => {
        console.error('Error connecting to websocket:', error);
      });
    },
  },
  beforeDestroy() {
    if (this.stompClient && this.stompClient.connected) {
      this.stompClient.disconnect();
    }
  },
}
</script>

<style lang="scss">
  .full-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("../assets/images/large-screen.png");
    background-repeat: no-repeat;
    background-size:100%;
    z-index: 9999;
    /* 添加其他样式 */
  }
  .grid-container {
    display: grid;
    grid-template-columns: 30rem 48rem 30rem;
    grid-gap: 1rem;
    padding: 0.5rem 5rem;
  }

  .grid-container > div {
    //background-color: #123570;
    text-align: center;
    padding: 0.5rem;
    border-radius: 0.2rem;
    color:white;
  }
  .item1{
    grid-column-start: 1;
    grid-column-end: 4;
    display: flex;
    justify-content: space-between;
  }
  .item8{
    grid-column-start: 1;
    grid-column-end: 4;
    display: flex;
    justify-content: center;
  }
  .item5,.item6,.item7{
    height:26rem;
  }
  .item2,.item3,.item4{
    height:25rem;
  }
  .custom-title {
    padding: 5px 10px;
    color: #fff; /* 标题颜色 */
    background-color: rgba(232, 210, 210, 0.5); /* 背景颜色以保证标题在边框之上可读 */
    font-size: 18px;
    border-radius: 4px;
  }
</style>
